<template>
    <section>
        <DetailsHeader title="实例监控" class="mb-24">
            <div class="fz-12 col-8A93A7 mr-32">实例ID: <span>{{ id }}</span></div>
        </DetailsHeader>

        <a-row :gutter="40">
            <a-col :span="8">
                <div class="card">
                    <GpuInfo :monitorInfo="instanceForm" />
                </div>
            </a-col>

            <a-col :span="16">
                <div class="card">
                    <GpuUsed :instanceId="id" />
                </div>
            </a-col>
        </a-row>

        <a-row :gutter="40">
            <a-col :span="12">
                <div class="card">
                    <CpuUsed :instanceId="id" />
                </div>
            </a-col>

            <a-col :span="12">
                <div class="card">
                    <CpuRam :instanceId="id"  />
                </div>
            </a-col>
        </a-row>

        <a-row :gutter="40">
            <a-col :span="12">
                <div class="card">
                    <SystemDisk :monitorInfo="instanceForm" />
                </div>
            </a-col>

            <a-col :span="12">
                <div class="card">
                    <DataDisk :monitorInfo="instanceForm" />
                </div>
            </a-col>
        </a-row>

    </section>
</template>

<script setup>
import { ref } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import SystemDisk from './components/SystemDisk.vue'
import DataDisk from './components/DataDisk.vue'
import CpuUsed from './components/CpuUsed.vue'
import CpuRam from './components/CpuRam.vue'
import GpuUsed from './components/GpuUsed.vue'
import GpuInfo from './components/GpuInfo.vue'
import { getPrometheusInfoApi } from 'api/modules/api.monitoring'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute();
const id = ref()
id.value = route.query.id  || ''

const instanceForm = ref({})
const getPrometheusInfo = ()=> {
    getPrometheusInfoApi({instanceId:id.value}).then(res=> {
        instanceForm.value = res.data?.data || {}

    })
}

getPrometheusInfo()

</script>

<style scoped lang="scss">

.ant-row {
    margin-bottom:15px;
}
.card {
    background: #fff;
    padding: 15px 20px;
    border-radius: 6px;
    height: 100%;
    .card-header {
        display: flex;
        justify-content: space-between;
    }


}

.charts-header {
    display: flex;
    justify-content: space-between;
}

.content-wrap {
    display: flex;

    .statistics-list {
        flex: 1;
        min-height: 300px;
    }
}

.card {
    background: #fff;
    padding: 24px;
    margin-bottom: 15px;
    border-radius: 6px;



    .card-content {
        display: flex;

        .totle-amont {
            color: #FAAD14;
            font-family: PingFang SC;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin-right: 16px;
        }

        .minus-sign {
            margin: 0 50px;
        }

        .my-commission-item {
            flex: 1;
            padding-left: 24px;
        }

        .line {
            height: auto;
            width: 1px;
            background: #ccc;
        }

        .item-txt {
            font-size: 14px;
            color: #8A93A7;
        }

    }

    .user-card-content {
        text-align: center;

        .user-info {
            display: flex;
            margin-bottom: 24px;

            .user-img {
                margin-right: 24px;

                img {
                    display: block;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                }
            }

            .point {
                color: #07F;
                text-align: right;
                font-family: PingFang SC;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-left: 8px;
            }

            .info {
                .member-grade {
                    display: inline-block;
                    width: 70px;
                    height: 20px;
                }
            }
        }

        .member-icon {
            width: 70px;
            height: 20px;
            margin-top: 5px;
        }
    }

}
</style>
